<!-- container box 嵌套 box -->
<template>
  <div class="form-list-drag">
    <el-scrollbar style="height:100%;">
      <div v-if="!tableData || tableData.length < 1" class="nodata">暂无数据</div>
      <div v-else class="form-list">
        <div v-for="item in tableData" :key="item.id" @click="chooseForm(item)" class="item">
          <div>{{item.name}}</div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    this.$post('/form/infos').then(response => {
      this.tableData = initData(response)
    })
  },
  data () {
    return {
      formLabelWidth: '100px',
      // 表单列表数据
      tableData: null
    }
  },
  methods: {
    // 选择了该表单
    chooseForm (item) {
      let dragConf = BackendjsFunctions.dragDefaultConf()
      dragConf.dragDivInnerCss = {
        'min-width': '150px',
        'height': '40px',
        'background': '#258ffb',
        'border-radius': '8px',
        'cursor': 'move',
        'display': 'flex',
        'justify-content': 'center',
        'align-items': 'center',
        'font-weight': 'bolder',
        'opacity': '0.6',
        'color': '#ffffff',
        'padding': '0 10px',
        'white-space': 'nowrap'
      }
      dragConf.dragDivInnerHtml = '<span>' + item.name + '</span>'
      BackendjsFunctions.dragFormRun(item.id, dragConf)
    }
  }
}
function initData (response) {
  if (response) {
    if (response.list && response.list.length > 0) {
      return response.list
    } else if (response.length > 0) {
      return response
    }
    return null
  } else {
    return null
  }
}
</script>

<style scoped lang="scss">
.form-list-drag {
  height: calc(100vh - 120px);
  /deep/ .el-scrollbar__wrap{
    overflow-x: hidden;
  }
  .nodata{
    color: #909399;
    line-height: 60px;
    text-align: center;
  }
}
.form-list{
  padding:0 10px 10px;
  font-size: 13px;
  .item{
    margin-bottom: 10px;
    border: 1px solid #e9e9e9;
    cursor: pointer;
    padding: 10px 10px;
    &:hover{
      color: #258ffb;
      border-color:#258ffb;
    }
  }
}

</style>
